<template>
	<div id="HomeHeader">
		<div class="header-left">
			<span class="iconfont">&#xe624;</span>
		</div>
		<div class="header-center">
			<span class="iconfont">&#xe632;</span>
			输入城市/景点/游玩主题
		</div>
		<!--<div class="header-right">
			<router-link to="./city">
				长沙
				<span class="iconfont">&#xe6aa;</span>
			</router-link>
		</div>-->
		
		<div class="header-right" @click="toCity">
			<!--长沙-->{{city}}
			<span class="iconfont">&#xe6aa;</span>
		</div>
		
	</div>
</template>

<script>
import { mapState } from "vuex" 
	
	
export default {
	methods:{
		toCity (){
			this.$router.push("./city")
		}
	},
	computed:{
		...mapState(["city"])
	}
}
</script>

<style scoped lang="stylus">
/*@import "../../../assets/css/var.styl"*/
@import "~css/var.styl"

	#HomeHeader{
		font-size: 0.14rem;
		height: 0.44rem;
		line-height: 0.44rem;
		/*background-color: #00bcd4;*/
		background-color: $bgColor;
		display: flex;
		text-align: center;
		align-items: center;
	}
	
	.header-left {
		font-weight: bold;
		width: 0.4rem;
		color: #FFFFFF;
	}
	.header-center {
		flex: 1;
        height: .3rem;
        line-height: .3rem;
        text-align: left;
        padding-left: .07rem;
        background-color: #ffffff;
        border-radius: .04rem;
        color: #999999;
	}
	.header-right {
		width: .64rem;
		color: #FFFFFF;
	}
	.header-right a{
		color: #FFFFFF;
	}
	
	
</style>